<template>
  <view class="box relative" @click.self="handleReview">
    <view class="disFlx gap-8 py-4">
      <view>
        <TImage error-img-type="person" width="80rpx" :src="data?.avatar" height="80rpx" border-radius="50%"></TImage>
      </view>
      <view class="flex-1">
        <view class="disFlxAC gap-8 mb-4">
          <text class="fz-14 linh-20">{{ data?.userName }}</text>
          <CustomTag
            v-if="data?.memberLevelName"
            :text="data?.memberLevelName"
            background-color="linear-gradient(90deg, #FDEDC7 0.12%, #F7D9A2 100%)"
            color="#EA5E0E"
            font-size="20rpx"
            line-height="28rpx"
            padding="4rpx 12rpx"
          ></CustomTag>
        </view>
        <view class="disFlxAC gap-4">
          <text class="fz-12 linh-16" style="white-space: nowrap">{{ data?.companyPosition }}</text>
          <view
            v-if="data?.companyPosition"
            class="fz-12 linh-16 w-12 h-16 disFlxCC"
            style="color: #c8cacc"
          >
            丨
          </view>
          <text class="fz-12 linh-16 ov-1">{{ data?.companyName }}</text>
        </view>
      </view>
    </view>
    <view class="absolute top-12 right-12">
      <CustomTag
        v-if="reviewStatusText.text"
        :text="reviewStatusText.text"
        :background-color="reviewStatusText.bgColor"
        :color="reviewStatusText.color"
        font-size="20rpx"
        line-height="28rpx"
        padding="4rpx 12rpx"
      ></CustomTag>
    </view>
    <view class="disFlxAC gap-4 mt-8">
      <TImage
        :src="`${
          data?.boType === BoTypeEnum.Demand
            ? 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png'
            : 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png'
        }`"
        width="40rpx"
        height="40rpx"
      ></TImage>
      <text class="ov-1 fz-16 linh-24 font-bold">{{ data?.title }}</text>
    </view>
    <view class="mt-8">
      <text v-if="data?.boType === BoTypeEnum.Demand" class="fz-12 linh-16 ov-1">行业要求：{{ data?.industryCategoryNames }}</text>
      <text v-else class="fz-12 linh-16 ov-1">所属行业：{{ data?.industryCategoryNames }}</text>
    </view>
    <view v-if="data?.incentiveOpen === IncentiveOpenEnum.Yes" class="mt-8">
      <text class="fz-12 linh-16 mt-8 ov-2" style="color: #ea5e0e">
        撮合激励：{{ getIncentiveDetails(data) }}
      </text>
    </view>
    <view
      class="pt-12 pr-12 disFlxAC flexEnd gap-12 mt-12"
      style="box-shadow: 0px 2rpx 0px 0px #ebedf0 inset"
    >
      <TButton
        v-if="data?.phone"
        text="联系ta"
        type="none"
        :customStyle="{
          backgroundColor: '#FFF',
          color: '#2878FF',
          border: '1px solid #2878FF',
        }"
        custom-class="h-32 linh-32 br-16"
        @click.stop="makePhoneCall"
      />

      <TButton
        v-if="data?.reviewStatus === ReviewStatus.Pending"
        text="审核"
        type="none"
        :customStyle="{
          backgroundColor: '#2878FF',
          color: '#FFFFFF',
        }"
        custom-class="h-32 linh-32 br-16"
        @click.stop="handleReview"
      />
    </view>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import type { IBusinessOpportunityReviewList } from '@/api/businessOpportunities/type';
  import { computed, type PropType } from 'vue';
  import {
    BoStatusEnum,
    IncentiveOpenEnum,
    IncentiveTypeEnum,
    BoTypeEnum,
    ReviewStatus,
  } from '@/enums/businessOpportunitiesEnum';
  import { getIncentiveDetails } from '@/pages/businessOpportunities/components/utils';

  const props = defineProps({
    data: Object as PropType<IBusinessOpportunityReviewList>,
  });
  const emits = defineEmits(['review']);
  const reviewStatusText = computed(() => {
    if (props.data?.reviewStatus === undefined) return {};
    return {
      [ReviewStatus.Pending]: {
        color: '#FFFFFF',
        bgColor: '#E29942',
        text: '待审核',
      },
      [ReviewStatus.Approved]: {
        color: '#FFFFFF',
        bgColor: '#2878FF',
        text: '已通过',
      },
      [ReviewStatus.Rejected]: {
        color: '#FFFFFF',
        bgColor: '#EA5E0E',
        text: '已驳回',
      },
      [ReviewStatus.Expired]: {
        color: '#333333',
        bgColor: '#F2F3F5',
        text: '已失效',
      },
    }[props.data?.reviewStatus!];
  });

  const handleReview = () => {
    emits('review', props.data?.id);
  };

  function makePhoneCall() {
    uni.makePhoneCall({
      phoneNumber: props.data?.phone!,
    });
  }
</script>
<style lang="scss" scoped>
  .box {
    padding: 24rpx;
    background-color: #fff;
    border-radius: 32rpx;
    position: relative;
    overflow: hidden;
  }
</style>
